<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body {
      margin: 0;
    }

    .tabs {
      width: 100%;
      height: 50px;
      display: flex;
      flex-direction: row;
      justify-content: space-around;
      background-color: azure;
    }

    button {
      border: 0px solid #000;
      background-color: transparent;
      width: 100%;
      font-size: 3vw;
      font-weight: 500;
    }

    /* 继续优化tab样式 */
  </style>
</head>

<body>
  <div class="tabs">
    <button>首页</button>
    <button>分类</button>
    <button>购物车</button>
    <button>我的</button>
  </div>

  <h1>聊天记录</h1>
  <textarea name="" id=""></textarea>
  <button class="send" style="background-color: aquamarine;width: 50px;">发送</button>
  <li>

  </li>





  <script type="module">
    import { add } from './scripts/main.js'
    console.log(add(133, 216565));
  </script>
  <script>
    const textarea = document.querySelector('textarea')
    const li = document.querySelector('li')
    const send = document.querySelector('.send')
    textarea.addEventListener('keyup', function () {
      if (event.key === 'Enter') {
        send.click()
      }
    })
    send.addEventListener('click', function () {
      const message = textarea.value
      console.log(textarea.value);
      const newp = document.createElement('p')
      newp.innerHTML = message
      li.append(newp)
      textarea.value = ''
      newp.addEventListener('click', function () {
        this.remove()
      })
    })









    // 获取所有按钮元素
    const btns = document.querySelectorAll('button')

    // 遍历每个按钮，为每个按钮添加点击事件监听器
    btns.forEach(btn => {
      btn.addEventListener('click', () => {
        // 当按钮被点击时，先清除所有按钮的背景色
        btns.forEach(item => {
          item.style.backgroundColor = ''
          item.innerHTML = item.innerHTML.includes('选择') ? item.innerHTML.slice(0, item.innerHTML.length - 2) : item.innerHTML
        })
        // 然后将被点击按钮的背景色设置为绿色
        btn.style.backgroundColor = 'green'
        btn.innerHTML = btn.innerHTML + '选择'
      })
    })




  </script>
</body>

</html>